<!-- 内容标题（页面标题） -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>我的共享</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="javascript:void(0)" onclick="loadSubPage('mydisk')">网盘</a></li>
                    <li class="breadcrumb-item active">我的共享</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>
<!-- 主体内容 -->
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <table class="table table-striped" id="sharedFiles">
                    <thead>
                        <tr>
                            <th style="width: 25%">共享地址</th>
                            <th style="width: 25%">共享日期</th>
                            <th style="width: 10%">权限</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in sharedList">
                            <td><a href="javascript:void(0)">{{item.dir}}</a></td>
                            <td>{{item.time}}</td>
                            <td>{{item.limit}}</td>
                            <td>
                                <a class="btn btn-info btn-sm" :name="index" href="javascript:void(0)" onclick="editFileShareLimit(this.name)"><i class="fas fa-edit"></i> 修改</a>
                                <a class="btn btn-danger btn-sm" :name="index" href="javascript:void(0)" onclick="removeFileShare(this.name)"><i class="fas fa-trash"></i> 取消共享</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- /.col-md-6 -->
            </div>
        </div>
        <!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<div class="modal fade" id="sharedFileLimitDialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">共享设置</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-auto">
                        <input type="checkbox" :checked="sharedFile.limit[0]==1" id="sharedCheckRead">
                        <label for="sharedCheckRead">匿名读</label>
                    </div>
                    <div class="col-sm-auto">
                        <input type="checkbox" :checked="sharedFile.limit[1]==1" id="sharedCheckWrite">
                        <label for="sharedCheckWrite">匿名写</label>
                    </div>
                    <div class="col-sm-auto">
                        <input type="checkbox" :checked="sharedFile.limit[6]==1" id="sharedCheckSearch">
                        <label for="sharedCheckSearch">可被搜索</label>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-auto">
                        <input type="checkbox" :checked="sharedFile.limit[3]==1" id="sharedCheckUserRead">
                        <label for="sharedCheckUserRead">用户读</label>
                    </div>
                    <div class="col-sm-auto">
                        <input type="checkbox" :checked="sharedFile.limit[4]==1" id="sharedCheckUserWrite">
                        <label for="sharedCheckUserWrite">用户写</label>
                    </div>
                    <div class="col-sm-auto">
                        <input type="checkbox" :checked="sharedFile.limit[7]==1" id="sharedCheckUsePw" onclick="sharedCheckPwInputBox.hidden=!this.checked">
                        <label for="sharedCheckUsePw">使用密码</label>
                    </div>
                </div>
                <div class="row" id="sharedCheckPwInputBox" :hidden="sharedFile.limit[7]==0">
                    <div class="col-sm-auto">
                        输入密码：<input class="col-sm-4" type="text" :value="sharedFile.password" id="sharedCheckPwInput">
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveSharedFileConfig()">保存修改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<script>
    var sharedList=[{
        dir:'bby/sb/',
        time:'2021/08/15 12:54:55',
        limit:'11-11-11',
        password:'123321'
    },{
        dir:'bby/sb/',
        time:'2021/08/15 12:54:55',
        limit:'11-11-11',
        password:'123321'
    },{
        dir:'bby/sb/',
        time:'2021/08/15 12:54:55',
        limit:'10-11-11',
        password:'123321'
    },{
        dir:'bby/sb/',
        time:'2021/08/15 12:54:55',
        limit:'11-10-10',
        password:'123321'
    },]
    var shareFileVue=new Vue({
        el:'#sharedFiles',
        data:{
            sharedList:sharedList
        }
    })
    var shareDialogVue=new Vue({
        el:'#sharedFileLimitDialog',
        data:{
            sharedFile:sharedList[0]
        }
    })
    var selShareFileId=-1;
    function saveSharedFileConfig() {
        let limit='';
        limit+=sharedCheckRead.checked? '1':'0';
        limit+=sharedCheckWrite.checked? '1':'0';
        limit+='-';
        limit+=sharedCheckUserRead.checked? '1':'0';
        limit+=sharedCheckUserWrite.checked? '1':'0';
        limit+='-';
        limit+=sharedCheckSearch.checked? '1':'0';
        limit+=sharedCheckUsePw.checked? '1':'0';
        shareFileVue.sharedList[selShareFileId].limit=limit;
        shareFileVue.sharedList[selShareFileId].password=sharedCheckPwInput.value;
    }
    function editFileShareLimit(id) {
        selShareFileId=id;
        shareDialogVue.sharedFile=sharedList[id];
        $('#sharedFileLimitDialog').modal('show');
    }
    function removeFileShare(id) {
        selShareFileId=id;
    }
</script>